<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>首页</title>
<style type="text/css">
.index-login.form-horizontal .control-label {
  width: 55px;
  text-align: center;
}
.index-login.form-horizontal .controls {
  margin-left: 60px;
}
#search_text_caption {
  height: 32px;
  padding: 0;
  list-style: none;
}
#search_text_caption li {
  width: 64px;
  height: 27px;
  _height: 27px;
  margin-right: 3px;
  padding-top: 5px;
  background-color: #cee4f8;
  text-align: center;
  color: #7796D5;
  list-style: none;
  float: left;
  cursor: pointer;
}
#search_text_caption li.on {
  background-color: #7796d5;
  color: #ffffff;
}
#search_txt {
  width: 184px;
}
#select_area {
  width: 95px;
  height: 31px;
  background: url(http://img01.51jobcdn.com/im/2012/index/search_list.gif) no-repeat;
  cursor: pointer;
  border: none;
  font-size: 13px;
  text-align: center;
  padding-right: 27px;
}
</style>
<script>
  var selectAreaModalLoaded = false;
  $(document).ready(function() {
    $('#member_login_form').validate();
    $('#hr_login_form').validate();

    $('#search_text_caption li').click(function() {
      $('#search_text_caption li').removeClass('on');
      var id = $(this).addClass('on').attr('id');
      $('#search_txt_hidden').attr('name', id);
      $('#search_txt').focus();
    });

    $('#search_form').submit(function() {
      var value = $.trim($('#search_txt').val());
      if (!value) {
        $('#search_txt_hidden').removeAttr('name');
      } else {
        $('#search_txt_hidden').val(value);
      }
    });

    $('#select_area').click(function() {
      if (!selectAreaModalLoaded) {
        $.get('${ctx}/helper/selectAreaModal', function(html) {
          $('#select_area_modal').html(html);
          callSelectAreaModal();
          selectAreaModalLoaded = true;
        });
      } else {
        callSelectAreaModal();
      }
    });

    $('#search_txt').focus();
  });

  function callSelectAreaModal() {
    SelectAreaModal.init();
    $('#select_area_modal').data('callback', updateSelectedArea).modal('show');
  }

  function updateSelectedArea(selectedArea) {
    if (selectedArea) {
      var hidden = $('#select_area_hidden');
      if (selectedArea[0]) {
        if (selectedArea[0].length === 2) {
          hidden.attr('name', 'search_EQ_province');
        } else if (selectedArea[0].length === 6) {
          hidden.attr('name', 'search_EQ_city');
        }
        hidden.val(selectedArea[0]);
      } else {
        hidden.removeAttr('name').removeAttr('value');
      }
      $('#select_area').val(selectedArea[1]);
    }
  }
</script>
</head>

<body>
  <div id="title"><h1>欢迎来到Mouse的世界！</h1></div>
  <div class="row">
    <div class="span6">
      <form method="POST" id="member_login_form" action="${ctx}/member/login" class="index-login form-horizontal">
        <h3>个人服务 Job Seekers</h3>
        <div class="row">
          <div class="span3">
            <div class="control-group">
              <label for="memberUsername" class="control-label">用户名</label>
              <div class="controls">
                <input type="text" id="memberUsername" name="username" class="span2 required" />
              </div>
            </div>
            <div class="control-group">
              <label for="memberPassword" class="control-label">密　码</label>
              <div class="controls">
                <input type="password" id="memberPassword" name="password" class="span2 required" />
              </div>
            </div>
          </div>
          <div class="span2"><input id="submit_btn" class="btn btn-large btn-primary" type="submit" value="登录" /></div>
        </div>
        <div class="row">
          <div class="control-group">
            <div class="controls">
              <label class="checkbox" for="memberRememberMe"><input type="checkbox" id="memberRememberMe" name="rememberMe" /> 记住我</label>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="span6">
      <form method="POST" id="hr_login_form" action="${ctx}/hr/login" class="index-login form-horizontal">
        <h3>企业服务 Employers</h3>
        <div class="row">
          <div class="span3">
            <div class="control-group">
              <label for="hrUsername" class="control-label">用户名</label>
              <div class="controls">
                <input type="text" id="hrUsername" name="username" class="span2 required" />
              </div>
            </div>
            <div class="control-group">
              <label for="hrPassword" class="control-label">密　码</label>
              <div class="controls">
                <input type="password" id="hrPassword" name="password" class="span2 required" />
              </div>
            </div>
          </div>
          <div class="span2"><input id="submit_btn" class="btn btn-large btn-primary" type="submit" value="登录" /></div>
        </div>
        <div class="row">
          <div class="control-group">
            <div class="controls">
              <label class="checkbox" for="hrRememberMe"><input type="checkbox" id="hrRememberMe" name="rememberMe" /> 记住我</label>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
  <h3>搜索职位</h3>
  <form id="search_form" action="${ctx}/jobsearch/keyword" method="post" class="form-horizontal">
    <div class="row">
      <ul id="search_text_caption" class="span3">
        <li id="search_LIKE_name" class="on">职位</li>
        <li id="search_LIKE_company__name">公司</li>
        <li id="search_LIKE_keyword">关键字</li>
      </ul>
      <div class="span3">
        <a href="#">高级搜索</a>
        <a href="#">地图搜索</a>
      </div>
    </div>
    <div class="row">
      <div class="span3">
        <input type="text" id="search_txt" />
        <input type="hidden" id="search_txt_hidden" name="search_LIKE_name" />
      </div>
      <div class="span3">
        <input type="button" id="select_area" value="选择地区" />
        <input type="hidden" id="select_area_hidden" />
        <input id="submit_btn" class="btn btn-primary" type="submit" value="搜索" />
      </div>
    </div>
  </form>
  <div id="select_area_modal" class="modal hide fade"></div>
</body>
</html>
